{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/tables/beautytables/beautytables.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}

	<script src="{{ asset('bundles/applicationbootstrap/js/tables/beautytables/beautytables.js') }}" type="text/javascript"></script>

	<script type="text/javascript">

		$(document).ready(function() {
			// Run beauty tables plugin on every table with class .beauty-table
			$('.beauty-table').each(function(){
				// Run keyboard navigation in table
				$(this).beautyTables();
				// Nice CSS-hover row and col for current cell
				$(this).beautyHover();
			});
		});
		
	</script>
	
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
	    <div class="row">
	        <div class="col-lg-12">
	            <h2 class="page-header">Beauty table</h2>
	        </div>
	        <!-- /.col-lg-12 -->
	    </div>
	    <!-- /.row -->
	    <div class="row">
	        <div class="col-lg-12">
				<h4>This is table with hidden inputs in cell's and keyboard navigation in table, see below</h4>
				<ol>
					<li><kbd>SHIFT</kbd>+<kbd>arrow key</kbd>-Prev(Next) cell at row/col</li>
					<li><kbd>CTRL</kbd>+<kbd>arrow key</kbd>-First(End) cell at row/col</li>
					<li><kbd>PgUp/PgDown</kbd>-First(End) cell in table</li>
					<li><kbd>Enter/Tab</kbd>-Next cell in table</li>
				</ol>
				<p>For basic styling add the base class <code>.beauty-table</code> to <code>&lt;table&gt;</code>.</p>

				<div class="table-responsive">
					<table class="table beauty-table table-hover">
						<thead>
							<tr>
								<th>&nbsp;</th>
								<th>Rank</th>
								<th>Mobile OS</th>
								<th>Home page</th>
								<th>First Release</th>
								<th>Last versions</th>
								<th>Base kernel</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Android</td>
								<td><input type="text" value="1"></td>
								<td><input type="text" value="46.6%"></td>
								<td><input type="text" value="http://android.com"></td>
								<td><input type="text" value="23/09/2008"></td>
								<td><input type="text" value="4.2.2"></td>
								<td><input type="text" value="linux"></td>
							</tr>
							<tr>
								<td>Sailfish OS</td>
								<td><input type="text" value="2"></td>
								<td><input type="text" value="17.5%"></td>
								<td><input type="text" value="https://sailfishos.org/"></td>
								<td><input type="text" value="development"></td>
								<td><input type="text" value="alpha"></td>
								<td><input type="text" value="linux"></td>
							</tr>
							<tr>
								<td>CyanogenMod</td>
								<td><input type="text" value="3"></td>
								<td><input type="text" value="14.2%"></td>
								<td><input type="text" value="www.cyanogenmod.org"></td>
								<td><input type="text" value="11/07/2010"></td>
								<td><input type="text" value="10.2.1"></td>
								<td><input type="text" value="linux"></td>
							</tr>
							<tr>
								<td>FirefoxOS</td>
								<td><input type="text" value="4"></td>
								<td><input type="text" value="6.3% "></td>
								<td><input type="text" value="http://firefoxos.com"></td>
								<td><input type="text" value="02/07/2013"></td>
								<td><input type="text" value="1.4beta"></td>
								<td><input type="text" value="linux"></td>
							</tr>
							<tr>
								<td>MeeGo</td>
								<td><input type="text" value="5"></td>
								<td><input type="text" value="2.6%"></td>
								<td><input type="text" value="https://meego.com"></td>
								<td><input type="text" value="26/05/2010"></td>
								<td><input type="text" value="1.2.0.9"></td>
								<td><input type="text" value="linux"></td>
							</tr>
						</tbody>
					</table>
				</div>
	        </div>
	    </div>
	    <div class="row">
	        <div class="col-lg-12">
				<h4>Another table with hidden inputs in cell's and keyboard navigation in table, see below</h4>
				<ol>
					<li><kbd>SHIFT</kbd>+<kbd>arrow key</kbd>-Prev(Next) cell at row/col</li>
					<li><kbd>CTRL</kbd>+<kbd>arrow key</kbd>-First(End) cell at row/col</li>
					<li><kbd>PgUp/PgDown</kbd>-First(End) cell in table</li>
					<li><kbd>Enter/Tab</kbd>-Next cell in table</li>
					<li>check <code>String Fill</code> checkbox and after entering in cell- next cell filled same value</li>
				</ol>
				<p>For basic styling add the base class <code>.beauty-table</code> to <code>&lt;table&gt;</code>.</p>
				<div class="table-responsive">
					<table class="table beauty-table table-hover">
						<thead>
							<tr>
								<th><input type="checkbox" name="string-fill">-string fill</th>
								<th>Rank</th>
								<th>Mobile OS</th>
								<th>Home page</th>
								<th>First Release</th>
								<th>Last version</th>
								<th>Base kernel</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Android</td>
								<td><input type="text" value="1"></td>
								<td><input type="text" value="46.6%"></td>
								<td><input type="text" value="http://android.com"></td>
								<td><input type="text" value="23/09/2008"></td>
								<td><input type="text" value="4.2.2"></td>
								<td><input type="text" value="linux"></td>
							</tr>
							<tr>
								<td>Sailfish OS</td>
								<td><input type="text" value="2"></td>
								<td><input type="text" value="17.5%"></td>
								<td><input type="text" value="https://sailfishos.org/"></td>
								<td><input type="text" value="development"></td>
								<td><input type="text" value="alpha"></td>
								<td><input type="text" value="linux"></td>
							</tr>
							<tr>
								<td>CyanogenMod</td>
								<td><input type="text" value="3"></td>
								<td><input type="text" value="14.2%"></td>
								<td><input type="text" value="www.cyanogenmod.org"></td>
								<td><input type="text" value="11/07/2010"></td>
								<td><input type="text" value="10.2.1"></td>
								<td><input type="text" value="linux"></td>
							</tr>
							<tr>
								<td>FirefoxOS</td>
								<td><input type="text" value="4"></td>
								<td><input type="text" value="6.3% "></td>
								<td><input type="text" value="http://firefoxos.com"></td>
								<td><input type="text" value="02/07/2013"></td>
								<td><input type="text" value="1.4beta"></td>
								<td><input type="text" value="linux"></td>
							</tr>
							<tr>
								<td>MeeGo</td>
								<td><input type="text" value="5"></td>
								<td><input type="text" value="2.6%"></td>
								<td><input type="text" value="https://meego.com"></td>
								<td><input type="text" value="26/05/2010"></td>
								<td><input type="text" value="1.2.0.9"></td>
								<td><input type="text" value="linux"></td>
							</tr>
						</tbody>
					</table>
				</div>
	        </div>
	    </div>
    </div> <!-- /container -->
    
{% endblock %}